<template>
    <div class="calculation-monitor-config">
        <!-- 新建计算监测量按钮 -->
        <el-button type="primary" @click="handleAddCalculation">新建计算监测量</el-button>
        <el-card style="margin-top: 20px;">
            <!-- 表格展示计算监测量 -->
            <el-table :data="calculationData" stripe style="width: 100%">
                <el-table-column prop="name" label="监测量名称"></el-table-column>
                <el-table-column prop="formula" label="计算公式"></el-table-column>
                <el-table-column prop="stationsAndPoints" label="涉及站点与测点"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" style="color: red;"
                            @click="handleDelete(scope.row)">删除</el-button>
                        <el-button type="text" size="small" @click="handleSort(scope.row)">排序</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 30, 40]" :size="size" 
                    layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </el-card>

        <!-- 操作记录 -->
        <el-card style="margin-top: 20px;">
            <div class="operation-records">
                <h3>操作记录</h3>
                <el-table :data="operationRecords" stripe style="width: 100%">
                    <el-table-column prop="time" label="操作时间"></el-table-column>
                    <el-table-column prop="type" label="操作类型"></el-table-column>
                    <el-table-column prop="operator" label="操作人员"></el-table-column>
                    <el-table-column prop="content" label="操作内容"></el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 数据定义
const calculationData = ref([
    {
        id: 1,
        name: '总流量监测',
        formula: 'Flow_A + Flow_B',
        stationsAndPoints: '站点A-流量计, 站点B-流量计',
        createTime: '2024-01-15 14:30:00'
    },
    {
        id: 2,
        name: '平均功率计算',
        formula: 'Power_X * 0.8',
        stationsAndPoints: '站点X-功率计',
        createTime: '2024-01-14 09:15:00'
    }
]);

const operationRecords = ref([
    { time: '2024-01-15 15:30:00', type: '新增', operator: '张工程师', content: '新增计算监测量：总流量监测' },
    { time: '2024-01-15 14:20:00', type: '编辑', operator: '李工程师', content: '修改计算公式：平均功率计算' },
    { time: '2024-01-14 09:15:00', type: '排序', operator: '王工程师', content: '调整监测量显示顺序' }
]);

const totalItems = ref(2);
const currentPage = ref(1);
const pageSize = ref(10);

// 方法定义
function handleAddCalculation() {
    console.log('Adding new calculation');
}

function handleEdit(row) {
    console.log('Editing row:', row);
}

function handleDelete(row) {
    console.log('Deleting row:', row);
}

function handleSort(row) {
    console.log('Sorting row:', row);
}

</script>

<style scoped>
.calculation-monitor-config {}

.operation-records {
    margin-top: 20px;
}
.pagination{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>